import './App.css';
import { Layout, Button, Image, Menu } from "antd"
import { useState } from "react";
const { Header, Sider, Content, Footer } = Layout;
import { MenuFoldOutlined, MenuUnfoldOutlined, AppstoreOutlined } from '@ant-design/icons';
import { Link, Routes, Route } from 'react-router-dom';
import Home from './views/Home';
import ReactLogo from './assets/react.svg';
import routers from './router/index';
function App() {
  const [collapsed, setCollapsed] = useState(false);
  const currentPath = window.location.pathname;
  const [selectedPath, setSelectedPath] = useState(
    routers.find(item => currentPath.includes(item.key))?.key || ''
  );

  // 重写函数
  const _wr = function (type: string) {
    const orig = (window as any).history[type]
    return function () {
      const rv = orig.apply(this, arguments)
      const e: any = new Event(type)
      e.arguments = arguments
      window.dispatchEvent(e)
      return rv
    }
  }

  window.history.pushState = _wr('pushState')

  // 在这个函数中做跳转后的逻辑
  const bindHistory = () => {
    const currentPath = window.location.pathname;
    setSelectedPath(
      routers.find(item => currentPath.includes(item.key))?.key || ''
    )
  }

  // 绑定事件
  window.addEventListener('pushState', bindHistory)
  return (
    // layout布局
    <Layout style={{ minHeight: '100vh' }}>
      {/* 菜单路由 */}
      <Sider trigger={null} collapsible collapsed={collapsed} onCollapse={value => setCollapsed(value)}>
        <div className="logo">
          <Image src={ReactLogo} preview={false}></Image>
          {!collapsed ? <span >qiankun</span> : ''}
        </div>
        <Menu
          theme="dark"
          mode="inline"
          defaultSelectedKeys={['main-app']}
          selectedKeys={[selectedPath || 'main-app']}
          onClick={({ key }) => setSelectedPath(key)}
        >
          {
            routers.filter((item) => item.showMenu).map(route => {
              return (
                <Menu.Item key={route.key}>
                  <AppstoreOutlined />
                  <Link to={route.path} style={{marginLeft: '20px'}}>
                    {route.title}
                  </Link>
                </Menu.Item>
              );
            })
          }
        </Menu>
      </Sider>
      <Layout>
        {/* 头部 */}
        <Header style={{ padding: 0 }}>
          <Button
            type="text"
            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            onClick={() => setCollapsed(!collapsed)}
            style={{
              fontSize: '16px',
              width: 64,
              height: 64,
              color: '#fff'
            }}
          />
        </Header>
        {/* 内容 */}
        <Content style={{ margin: '16px 16px 0' }}>
          {/* 主应用渲染区域 */}
          <Routes>
            <Route path="/" element={<Home />} />
          </Routes>

          {/* 子应用渲染区域 */}
          <div id='sub-app'></div>
        </Content>
        {/* 底部 */}
        <Footer style={{ textAlign: 'center', padding: 0, lineHeight: "48px" }}></Footer>
      </Layout>
    </Layout>
  )
}

export default App
